import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
//分别导入组件
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Detail from '@/pages/Detail.vue'

// 关于export导出
// 1. 默认导出export default语法 => 把整个实体全部导出,在引入的时候不需要加{}
//2.  命名导出 ,比如export const a = 10,引入的时候,必须加{}
export const a = 10;
//创建路由对象
export const router = createRouter({
    history:createWebHistory(),//history模式和hash模式
    //配置路由的规则
    //key-路径映射到对应的组件
    routes:[
        {
            //路由的重定向
            path:'/',
            // redirect:'/about'   //字符串写法
            // redirect:{path:'/about'} // 对象写法
            //redirect:{name:'abouts'} //命名路由-对象写法
            redirect:'/home'
        },
        {
        path:'/home',
        //命名路由
        name:'homes',
        component:Home
    },{
        path:'/about',
        name:'abouts',
        components:{ab:About}
    },{
        path:'/news',
        name:'news',
        component:News,
        //子路由组件
        children:[{
            name:'detail',
            //为query准备的
            //path:'detail',//此处不需要写/

            //params - 需要在path中使用占位符
            path:'detail/:id/:title/:content?',
            component:Detail,
            //props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
            //实际上等同于:<Detail :id='1' :title='标题' :content='内容'/>
             props:true,
             
            //props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
            
            //props:{id:1,title:'标题',content:'内容'}

            //props(route){
                //如果想要传递query参数,需要先修改path:'detail'
                //console.log(route.query)

                //把router.query中的每一组key-value作为props传给Detail组件
                // return route.query

                //把router.params中的每一组key-value作为props传给Detail组件
                //只是如果真的需要传递param,没有必要这样写,直接使用props:true
               //return route.params
            //}
        }]
    }]
})
//router需要暴露出去
//export default router